@import './theme';

.list-group :global(.list-group) {
  max-width: 400px;
}

.ratio-examples {
  :global(.ratio) {
    display: inline-block;
    width: 10rem;
    color: #6c757d;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    margin-right: 5px;

    & > div {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.static-dropdown-menu {
  composes: clearfix from global;

  :global(.dropdown-menu) {
    position: static !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    right: auto !important;
    display: block !important;
    opacity: 1 !important;
  }
}
.custom-dropdown-menu :global(.super-colors) {
  background: linear-gradient(
    to bottom,
    orange,
    yellow,
    green,
    cyan,
    blue,
    violet
  );
}

// global b/c we need to use it in a modal
:global(.show-grid) {
  :global(.row) > :global(.col),
  :global(.row) > [class^='col-'] {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    background-color: $brand-light;
    border: 1px solid $brand;
  }

  :global(.row) + :global(.row) {
    margin-top: 1rem;
  }
}

// has to be fully global because of modal portals
:global(.modal-90w) {
  width: 90%;
  max-width: none !important;
}

.overlay-contained {
  height: 200px;
  & > div {
    position: relative;
  }
}